<template>
<div>
            <!--添加/更新弹出层-->
    <!--表单校验,1)需要在el-form上设置rules属性和ref属性-->
    <!--2)el-form-item上需要设置prop属性-->
    <!--3)data中需要rules属性,其中的key是prop的值-->
    <el-dialog :title="title" :close-on-click-modal="false" style="margin-left:300px;width: 1000px" :visible.sync="editProductDialog">
        <el-form :model="eidtproduct" label-width="80px" ref="form">
          <el-form-item label="用户名称" v-if="!iseidt">
            <el-input size="small" style="width: 300px" v-model="eidtproduct.userName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" v-if="!iseidt">
            <el-input size="small" style="width: 300px" v-model="eidtproduct.productName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户ID" v-if="iseidt">
            <el-input size="small" style="width: 300px" v-model="eidtproduct.userId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品Id" v-if="iseidt">
            <el-input size="small" style="width: 300px" v-model="eidtproduct.productId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品Id" v-if="iseidt">
            <el-input size="small" style="width: 300px" v-model="eidtproduct.skuId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="评分(1-5)">
            <el-input size="small" style="width: 300px"  v-model="eidtproduct.rating" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="评价内容">
            <el-input size="small" style="width: 300px" v-model="eidtproduct.comment" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="显示状态" v-if="iseidt">
            <el-radio-group v-model="eidtproduct.status">
              <!--此处有:-->
              <el-radio :label="1">显示</el-radio>
              <el-radio :label="0">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetEditForm('eidtproduct')" size="small">取 消</el-button>
          <el-button type="primary" @click="saveUser('eidtproduct')" size="small">确 定</el-button>
        </div>
      </el-dialog>
        <!-- 展示表单代码 -->
        <div>
            <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                prop="userId"
                label="用户Id"
            ></el-table-column>
            <el-table-column
                prop="productId"
                label="商品Id"
            ></el-table-column>
            <el-table-column
                prop="skuId"
                label="库存Id"
            ></el-table-column>
            <el-table-column
                prop="rating"
                label="评分"
            ></el-table-column>
            <el-table-column
                prop="comment"
                label="评价内容"
            ></el-table-column>
            <el-table-column
                prop="images"
                label="评论图片"
            ></el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间"
            ></el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间"
            ></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,'编辑评价')">编辑</el-button>
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,'新增评价')">新增</el-button>
                <el-button
                    v-if="scope.row.parentTypeId !== 0"
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
        </div>
        <div style="display: flex; align-items: center; margin-top: 30px; margin-left: 400px;">
            <el-pagination
                background
                @size-change="handleSizeChange"
                :page-sizes="[3, 6, 9]"
                @current-change="handleCurrentChange"
                :current-page="reviewproduct.pageNum"
                :page-size="reviewproduct.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
            <el-button style="margin-left: 10px" size="small" type="primary" plain @click="toPage">跳转</el-button>
          </div>
</div>
</template>

<script>
    import {findAllReviews,deleteReviewsById,saveReviews,updateReviews} from '@/api/product/productReview.js'
export default{
    name:'productReview',
    data(){
        return{
        tableData:[],
        reviewproduct:{
            pageNum:1,
            pageSize:3,
            userId:null,
            productId:null,
            skuId:null,
            images:null,
            rating:null,
            comment:null,
            createdTime:null,
            updateTime:null,
        },
        eidtproduct:{
            id:null,
            userName:null,
            productName:null,
            rating:null,
            comment:null,
            status:null,
            userId:null,
            productId:null,
            skuId:null
        },
        total:0,
        editProductDialog:false,
        title:'新增评价',
        iseidt:false
        }
    },
    methods:{
        findAllReview(){
            findAllReviews(this.reviewproduct)
            .then(res=>{
                console.log(res.data.list);
                this.tableData = res.data.list
                this.total = res.data.total
            })
        },
        toPage(val){
            this.reviewproduct.pageNum = val
            this.findAllReview()
        },
        handleSizeChange(val){
            this.reviewproduct.pageSize = val
            this.findAllReview()
        },
        handleCurrentChange(val){
            this.reviewproduct.pageNum = val
            this.findAllReview()
        },
        handleDelete(index,row){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '删除用户!', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteReviewsById(row.id)
                .then(res => {
                    if (res.code == 20000) {
                    // 弹框
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    // 刷新
                    this.product.pageNum = 1;
                    this.findAllReview()
                    }
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });
            });
        },
        handleEdit(index,row,title){
            this.title = title
            if(this.title === '新增评价'){
                this.eidtproduct = {}
                this.iseidt = false
                this.editProductDialog = true 
            }else{
                this.iseidt = true
                this.eidtproduct.id = row.id
                this.eidtproduct.userId = row.userId
                this.eidtproduct.productId = row.productId
                this.eidtproduct.comment = row.comment
                this.eidtproduct.status = row.status
                this.eidtproduct.rating = row.rating
                this.eidtproduct.skuId = row.skuId 
                this.editProductDialog = true
                
            }
        },
        resetEditForm(){
            this.$refs.form.resetFields()
            this.editProductDialog = false
        },
        saveUser(formName){
            if(this.title === '新增评价'){
                saveReviews(this.eidtproduct)
                .then(res=>{
                    this.$message({
                    type: 'success',
                    message: "添加成功"
                    })
                    this.findAllReview()
                    this.editProductDialog = false
                })
            }else{
                updateReviews(this.eidtproduct)
                .then(res=>{
                    this.$message({
                    type: 'success',
                    message: "修改成功"
                    })
                    this.findAllReview()
                    this.editProductDialog = false
                })
            }
        }

    },
    created(){
        this.findAllReview()
    }
}
</script>